﻿@using Wicresoft.UnifyShow.Business;
@{
    ViewBag.Title = "服务水平统计";
    Layout = "~/Views/Shared/_LayoutSummary.cshtml";
    List<BusinessSystemModel> siteContains = (List<BusinessSystemModel>)ViewData["SitesContainsTheBS"];
}
<div class="right_title2">
    <a href="@Url.Action("index", "Home")">首页</a> > 业务状态总览 > @ViewData["ServiceAlias"]>
    <span>服务水平统计</span></div>
<input type="hidden" value="@ViewData["ServiceAlias"]" id="serviceAlias"/>
<input type="hidden" value="@ViewData["ServiceID"]" id="serviceID"/>
<input type="hidden" value="@ViewBag.SiteID" id="siteID"/>
<div class="class">
    <div class="tab_area">
        <ul class="tab_head tabs">
            @foreach (var item in ViewBag.Sites)
            {
                if (item.ID == ViewBag.SiteID)
                { 
                <li data-local="@item.ID" data-bs="@siteContains.FirstOrDefault(o => o.SiteID == item.ID).ID" data-select="true"><a href="#@item.Name">@item.Alias</a></li>
                }
                else
                { 
                <li data-local="@item.ID" data-bs="@siteContains.FirstOrDefault(o => o.SiteID == item.ID).ID" ><a href="#@item.Name">@item.Alias</a></li>
                }
            }
        </ul>
        <div class="tab_container">
            <div class="tab_content" id="tab1">
                <div class="search">
                    <div class="search_bg">
                        <h2>
                            筛选条件</h2>
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tbody>
                                <tr>
                                    <td width="8%">
                                        开始时间:
                                    </td>
                                    <td width="22%">
                                        <input class="InputStyle1" type="text" id="startTime" />
                                    </td>
                                    <td width="8%">
                                        结束时间:
                                    </td>
                                    <td width="22%">
                                        <input class="InputStyle1" type="text" id="endTime" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <p>
                            <input class="Button2 ui-icons" id="Reset" title="Reset" value="重置" type="button" />
                            <input class="Button2 ui-icons" id="Select" title="Select" value="查看" type="button" /></p>
                    </div>
                </div>
                <div class="clear">
                </div>
                <div class="index_lr index_lr_tab">
                    <ul>
                        <li class="index_lr2_M">
                            <div class="index_lrA_title ui-icons">
                                <h3>
                                    解决/响应率</h3>
                            </div>
                            <div class="index_pt_bg" id="impact">
                                <!--*****************************************************************************-->
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clear">
                </div>
                <div class="index_lr index_lr_tab">
                    <ul>
                        <li class="index_lr2_M">
                            <div class="index_lrA_title ui-icons">
                                <h3>供应商绩效考核</h3>
                            </div>
                            <div class="index_pt_bg">
                            <table><tbody>
                            <tr><td><B>事件供应商绩效考核</B></td></tr>
                            <tr><td><img data-parameter="SLAToFirm" data-other="&firmTo=Incident" alt="SLA"  class="report" width="@GlobalHelper.Width3" height="@GlobalHelper.Height3"/></td></tr>
                            @*<tr><td><B>变更供应商绩效考核</B></td></tr>
                            <tr><td><img data-parameter="SLAToFirm" data-other="&firmTo=Change" alt="SLA"  class="report" width="@GlobalHelper.Width3" height="@GlobalHelper.Height3"/></td></tr>
                            <tr><td><B>问题供应商绩效考核</B></td></tr>
                            <tr><td><img data-parameter="SLAToFirm" data-other="&firmTo=Problem" alt="SLA"  class="report" width="@GlobalHelper.Width3" height="@GlobalHelper.Height3"/></td></tr>*@
                            </tbody></table>
                              
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="clear">
                </div>
                <div class="index_lr index_lr_tab">
                    <ul>
                        <li class="index_lr2_M">
                            <div class="index_lrA_title ui-icons">
                                <h3>
                                    工单详情</h3>
                            </div>
                            <div class="index_pt_bg">
                                <div>
                                <select id="type" onchange="changeIm();">
                                    <option value="1">事件</option>
                                   @* <option value="2">变更</option>
                                    <option value="3">问题</option>*@
                                </select>
                                <select id="im" onchange="LoadSLADetails();">
                                    <option value="i1">事件响应SLA-高优先级</option>
                                    <option value="i2">事件响应SLA-中优先级</option>
                                    <option value="i3">事件响应SLA-低优先级</option>
                                    <option value="i4">事件解决SLA-高优先级</option>
                                    <option value="i5">事件解决SLA-中优先级</option>
                                    <option value="i6">事件解决SLA-低优先级</option>
                                </select>
                                <select id="status" onchange="LoadSLADetails();">
                                    <option value="1">满足</option>
                                    <option value="2">不满足</option>
                                    <option value="3">告警</option>
                                    <option value="4">等待</option>
                                </select>
                                </div><br />
                               <!--*****************************************************************************-->
                                <div id="details"></div><br />
                                
                            
                            </div>
                           
                        </li>
                    </ul>
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        <div class="clear">
        </div>
    </div>
</div>
@section ScriptAndCss
{
    <script type="text/javascript">
        function changeIm(){
            var type=$("#type").val();
            var option1,option2,option3,option4,option5,option6;
            switch(type)
            {
                case "1":
                   option1 = new Option("事件响应SLA-高优先级", "i1");
                   option2 = new Option("事件响应SLA-中优先级", "i2");
                   option3 = new Option("事件响应SLA-低优先级", "i3");
                   option4 = new Option("事件解决SLA-高优先级", "i4");
                   option5 = new Option("事件解决SLA-中优先级", "i5");
                   option6 = new Option("事件解决SLA-低优先级", "i6");
                   break;
                case "2":
                   option1 = new Option("变更响应SLA-高优先级", "c1");
                   option2 = new Option("变更响应SLA-中优先级", "c2");
                   option3 = new Option("变更响应SLA-低优先级", "c3");
                   option4 = new Option("变更解决SLA-高优先级", "c4");
                   option5 = new Option("变更解决SLA-中优先级", "c5");
                   option6 = new Option("变更解决SLA-低优先级", "c6");
                   break;
                case "3":
                   option1 = new Option("问题响应SLA-高优先级", "p1");
                   option2 = new Option("问题响应SLA-中优先级", "p2");
                   option3 = new Option("问题响应SLA-低优先级", "p3");
                   option4 = new Option("问题解决SLA-高优先级", "p4");
                   option5 = new Option("问题解决SLA-中优先级", "p5");
                   option6 = new Option("问题解决SLA-低优先级", "p6");
                   break;
            }
            document.getElementById("im").options.length = 0;
            document.getElementById("im").options.add(option1);
            document.getElementById("im").options.add(option2);
            document.getElementById("im").options.add(option3);
            document.getElementById("im").options.add(option4);
            document.getElementById("im").options.add(option5);
            document.getElementById("im").options.add(option6);

            LoadSLADetails();
        }

        function LoadSLADetails() {
            var detailsurl="@Url.Action("SLAInfoToView", "SLA")"+"?sid=" + $("#siteID").val() + "&bnid=" + $("#serviceID").val() + "&sTime=" + $("#startTime").val() + "&eTime=" + $("#endTime").val() + "&_=" + Math.floor((Math.random() * 1000000000) + 1)+"&slaCategorychar="+$("#im").val()+"&slaStatus="+$("#status").val();
            $("#details").load(detailsurl);
        }

        function initTheReport() {
            $('.report').load(function () {
                $(this).parent().hideLoading();
            }).error(function () {
                $(this).parent().hideLoading();
            });
            $('.report').each(function () {
                var coclass = $(this).attr("alt");
                var method = $(this).attr("data-parameter");
                var other= $(this).attr("data-other");
                var url = "/" + coclass + "/" + method;
                url += "?sid=" + $("#siteID").val() + "&bnid=" + $("#serviceID").val() + "&sTime=" + $("#startTime").val() + "&eTime=" + $("#endTime").val() + "&_=" + Math.floor((Math.random() * 1000000000) + 1) + other;
                $(this).attr("src", url);
                $(this).parent().showLoading();
            });
        }

        $(document).ready(function () {

            $("#Select").click(function () {
              if ( $("#startTime").val()== "" ||  $("#endTime").val()== "") {
            alert("请输入日期后查询!");
                return;}
                var impacturl="@Url.Action("GetCharts", "ServiceLevelAgreement")";
                $("#impact").load(impacturl,function()
                {
                  initTheReport();
                });

                LoadSLADetails();
            });

            $("li", "ul.tabs").click(function () {
                $("li", "ul.tabs").removeClass("c ui-icons"); //Remove any "active" class 
                $(this).addClass("c ui-icons"); //Add "active" class to selected tab 
                $("#siteID").val($(this).attr("data-local"));
                $("#serviceID").val($(this).attr("data-bs"));
                $("#Reset").click();
            });

            $("#Reset").click(function () {
                $("#startTime").val(getDateThreeMonthStartString());
                 var date1=new Date();
                            date1.setDate(date1.getDate()+1);
                            $("#endTime").val(getDateString(date1));
                $("#Select").click();
            });

            $("li[data-select='true']", "ul.tabs").click();

            $("#startTime").datepicker();
            $("#endTime").datepicker();
        });

    </script>
}
@section  LeftMenu {
    <li><a href="@Url.Action("Index", "BusinessAvailable", new { businessSystemId = ViewData["ServiceID"] })">
        业务健康度总览</a></li>
    <li><a href="@Url.Action("Index", "BasicEnvironmentStatus", new { businessSystemId = ViewData["ServiceID"] })">
        基础环境状态</a></li>
    <li><a href="@Url.Action("Index", "ITBusinessStatistics", new { businessSystemId = ViewData["ServiceID"] })">
        IT服务统计</a></li>
    <li class="VNavLeaf ui-icons">服务水平统计</li>
}
